<template>
	<view class="setting">
		<view class="box">
			<StepInput :title="'头像'" :require="false" class="mb">
				<button class="upload_box button" open-type="chooseAvatar" @chooseavatar="chooseImg">
					<image :src="query.avatar?query.avatar:$IMG_URL('/static/user/default2.png')" mode="aspectFill"
						class="img"></image>
					<view class="btn">
						重新上传
					</view>
				</button>
			</StepInput>
			<StepInput :title="'昵称'" :require="false" class="mb">
				<u-input type="nickname" :border="false" input-align="right" placeholder="请输入昵称" class="input_cs" v-model="query.nickname" :clearable="false"/>
				<image :src="$IMG_URL('/static/home/indicate.png')" mode="aspectFill" class="icon"></image>
			</StepInput>
			<view class="comlum_Y mb">
				<view class="left">
					<view class="size">
						教言
					</view>
				</view>
				<u-input type="textarea" :border="false" :height="230" v-model="query.bio" :auto-height="false" :custom-style="customStyle"
					placeholder="请填写做教练的感悟，以供学员参考选择" :clearable="false"/>
			</view>
			<view class="comlum_Y">
				<view class="left">
					<view class="star">
						*
					</view>
					<view class="size">
						宣传照片
					</view>
				</view>
				<view class="photo">
					<image :src="$IMG_URL('/static/user/upload.png')" mode="" class="upload" v-if="query.image_list.length < 9" @tap="uploadCertImg"></image>
					<view v-for="(item,index) in query.image_list" :key="index" class="Item">
						<image :src="item" mode="aspectFill" class="img"></image>
						<image :src="$IMG_URL('/static/user/close.png')" mode="" class="close" @click="close(index)"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="more">
			<view class="size" @click="$ROUTELINK('more')">
				更多信息
			</view>
			<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
		</view>
		<view class="empty">
			
		</view>
		<view class="foot">
			<view class="btn" @click.stop="getCoachmainAmend">
				保存
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import StepInput from './components/StepInput.vue'
	import{
		coachmainInfo,
		coachmainAmend
	} from '@/api/coach.js'
	export default{
		components: {
			StepInput
		},
		data(){
			return{
				query: {
					avatar: "",
					nickname: '',
					mobile:'',
					bio:'',
					image_list:[]
				},
				customStyle: {
					background: '#f6f6f6',
					padding: '32rpx'
				},
			}
		},
		onLoad() {
			this.getCoachmainInfo()
		},
		methods:{
			getCoachmainAmend(){
				coachmainAmend(this.query).then(({data:res})=>{
					console.log('res', res);
					if(res.code == 1){
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success',
							icon: false,
							callback: () => { // 注意这里只是声明了一个箭头函数，并没有执行它
							  this.getCoachmainInfo()
							}
						})
					}else{
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
							icon: false,
						})
					}
				})
			},
			getCoachmainInfo(){
				coachmainInfo().then(({data:res})=>{
					console.log('res', res);
					if(res.code == 1){
						this.query = res.data
					}
				})
			},
			close(index){
				this.query.image_list.splice(index, 1)
			},
			uploadCertImg(){
				let that = this;
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ["original"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], //从相册选择
					success: function(res) {
						res.tempFilePaths.forEach(i=>{
							that.$UPLOADIMAGE(i, 'apply').then(imgUrl => {
								console.log('imgUrl', imgUrl);
								that.query.image_list.push(imgUrl)
								// that.$forceUpdate()
							})
						})	
					},
				});
			},
			// 选择图片
			chooseImg(e) {
				let that = this;
				if (e.detail.avatarUrl) {
					that.uploadImages(e.detail.avatarUrl , 'avatar');
				} else {
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ["original"], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ["album", "camera"], //从相册选择
						success: function(res) {
							console.log(e);
							that.uploadImages(res.tempFilePaths[0] , 'avatar');
						},
					});
				}
			},
			// 上传图片
			uploadImages(imgs, type) {
				let that = this;
				let token = uni.getStorageSync("token");
				let header = {};
				if (token) {
					header = {
						Authorization: token,
					};
				}
				uni.uploadFile({
					url: that.$API_URL('/share/upload'),
					filePath: imgs,
					name: "image",
					header: header,
						formData:{
							"form":type,
						},
					complete: ({data:res}) => {
						console.log(JSON.parse(res));
						const result = JSON.parse(res)
						if (result.code == 1) {
							that.$refs.uToast.show({
								title: "上传成功",
								type: 'success',
								icon: false,
							})
							that.query.avatar = result.data.image_url;
							console.log('that.query.avatar', that.query.avatar);
							this.$forceUpdate()
						} else {
							uni.showToast({
								title: "上传失败",
								icon: "none",
							});
						}
					},
				});
			},
		}
	}
</script>

<style lang="scss" >
	.empty {
		width: 750rpx;
		height: 180rpx;
	}
	
	button {
		margin: unset;
		padding: unset;
		background-color: transparent;
		/* 消除背景色 */
		border: none;
		/* 消除边框 */
	}
	
	button:after {
		border: unset;
	}
	
	page {
		background: #e9e9e9;
	}
	
	.icon {
		width: 10rpx;
		height: 16rpx;
		margin-left: 8rpx;
	}
	
	.comlum_Y {
		display: flex;
		flex-direction: column;
		width: 622rpx;
	
	}
	
	.left {
		display: flex;
		flex-direction: row;
		flex: 1;
		margin-bottom: 24rpx;
	
		.star {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #f37364;
		}
	
		.size {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #333333;
		}
	}
	
	.setting {
		display: flex;
		flex-direction: column;
		align-items: center;
	
		.box {
			margin-top: 32rpx;
			width: 702rpx;
			background: #ffffff;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 40rpx;
	
			.mb {
				margin-bottom: 48rpx;
			}
	
			.upload_box {
				width: 204rpx;
				height: 204rpx;
				border-radius: 16rpx;
				position: relative;
				overflow: hidden;
	
				padding: 0;
	
				.img {
					width: 100%;
					height: 100%;
				}
	
				.btn {
					position: absolute;
					bottom: 0;
					width: 204rpx;
					height: 46rpx;
					background: rgba(102, 102, 102, 0.8);
					border-radius: 0rpx 0rpx 16rpx 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					color: #ffffff;
				}
			}
		}
		.photo{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			flex-wrap: wrap;
			width: 100%;
		}
		.upload{
			width: calc((100% - 24rpx) / 3);
			height: 204rpx;
			 margin-right: 12rpx; /* 右边距 */
			margin-bottom: 12rpx;
		}
		.upload:last-child {
		  margin-right: 0; /* 如果是最后一个元素，移除右边距 */
		}
		.Item:nth-child(3n) {
		  margin-right: 0; /* 每行的第三个元素没有右边距 */
		}
		.Item{
			 width: calc((100% - 24rpx) / 3); /* 每行三个元素，包括间距 */
			height: 204rpx;
			background: rgba(0,0,0,0.00);
			border-radius: 16rpx;
			overflow: hidden;
			position: relative;
			margin-right: 12rpx; /* 右边距 */
			margin-bottom: 12rpx;
			.close{
				position: absolute;
				right: 0;
				top: 0;
				width: 52rpx;
				height: 52rpx;
			}
			.img{
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.foot {
		position: fixed;
		bottom: 0;
		padding-top: 10rpx;
		width: 750rpx;
		height: 160rpx;
		background: #ffffff;
		box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(166, 179, 194, 0.30);
		display: flex;
		justify-content: center;
	
		.btn {
			width: 710rpx;
			height: 88rpx;
			background: #73F0EA;
			border-radius: 16rpx;
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	
	.time-comlum-box {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.sex-comlum-box {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	
		.sexItem {
			width: 702rpx;
			height: 80rpx;
			background: #ffffff;
			border-radius: 16rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: center;
			color: #666666;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	
		.sexActiveIndex {
			width: 702rpx;
			height: 80rpx;
			background-color: rgba(129, 202, 197, 0.1);
			border-radius: 16rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: center;
			color: #73F0EA;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.more{
		margin-top: 20rpx;
		width: 702rpx;
		height: 104rpx;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 0 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.size{
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #333333;
			flex: 1;
		}
	}
</style>